<template>
      <el-card class="mylogin" style="max-width: 400px">
            <template #header>
            <div class="card-header">
                <img src="/src/assets/login.png">
            </div>
            </template>
            <el-form ref="loginFormRef" hide-required-asterisk :model="loginForm" 
                    label-width="60" 
                    style="max-width: 600px"
                    :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" 
                    placeholder="请输入账号"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" 
                    type="password"
                    placeholder="请输入密码"
                    show-password />
                </el-form-item>
               
                <el-form-item>
                    <el-button color="#626aef" type="primary" @click="loginSubmit">登录</el-button>
                    <el-button color="#626aef" plain @click="resetSubmit">重置</el-button>
                </el-form-item>
            </el-form>

        </el-card>

</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import { ElMessage } from 'element-plus'

//登录功能
//校验规则
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 8, message: '长度6-8位', trigger: 'blur' },
  ],

})
//获得登录表单对象 可以调用表单的函数
const loginFormRef = ref()

//登录数据表单
const loginForm = reactive({
    username:'',
    password:''
})
//登录提交
const loginSubmit = async()=>{
   //调用表单的输入框校验功能
    loginFormRef.value.validate(async (valid, fields) => {
    if (valid) {
         //校验通过再提交 
         let resp = await post('http://localhost:8080/baseProjj/login',loginForm)
         console.log(resp);

        //根据结果处理服务端响应
        if(resp.data.returnCode == 20010) {
            //成功 弹绿窗 跳页面
            ElMessage.success(resp.data.returnMsg)
            //存用户信息
            
            let loginUserStr = JSON.stringify(resp.data.returnData);
            console.log(loginUserStr);
            //存入sessionSotrage
            sessionStorage.setItem('loginUser',loginUserStr)
            //跳页面
            router.push("/main")

        }else if(resp.data.returnCode == 20011) {
            //用户名密码错误 弹红窗
            ElMessage.error(resp.data.returnMsg)
        }else if(resp.data.returnCode == 20012) {
            ElMessage.info(resp.data.returnMsg)
        }else if(resp.data.returnCode == 20013) {
            ElMessage.warning(resp.data.returnMsg)
        }


    } else {
      console.log('error submit!', fields)
    }
  })

}
//重置登录表单
const resetSubmit = ()=>{
    loginFormRef.value.resetFields()
}


</script>

<style scoped>
    .mylogin{
        margin: 15% auto;
        background-color: #cfcfebb6;
    }
</style>